<template>
  <div
    id="funnelChart"
    ref="funnelChart"
    :style="{ width: props.width, height: props.height }"
  ></div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { EChartsOption, EChartsType } from "echarts";
import { onMounted, onUnmounted, ref } from "vue";

const funnelChart = ref(null);
const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "100%",
  },
});
// 线性表的配置项
const option = ref<EChartsOption>({
  title: {},
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}%",
  },
  legend: {
    data: ["Show", "Click", "Visit", "Inquiry", "Order"],
  },
  series: [
    {
      name: "Funnel",
      type: "funnel",
      left: "10%",
      top: 60,
      bottom: 60,
      width: "80%",
      min: 0,
      max: 100,
      minSize: "0%",
      maxSize: "100%",
      sort: "descending",
      gap: 2,
      label: {
        show: true,
        position: "inside",
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: "solid",
        },
      },
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 1,
      },
      emphasis: {
        label: {
          fontSize: 20,
        },
      },
      data: [
        { value: 60, name: "Visit" },
        { value: 40, name: "Inquiry" },
        { value: 20, name: "Order" },
        { value: 80, name: "Click" },
        { value: 100, name: "Show" },
      ],
    },
  ],
});

const initChart = () => {
  const myChart: EChartsType = echarts.init(funnelChart.value!);
  myChart.setOption(option.value);
  window.addEventListener("resize", () => myChart.resize());
};

onMounted(() => {
  initChart();
});
onUnmounted(() => {
  window.addEventListener("resize", null);
});
</script>
<style lang="less" rel="stylesheet/less" scoped></style>
